<template>
  <div>
    <el-form
      :disabled="disableElement"
      :model="prevApplyFormData"
      :rules="rules"
      label-width="150px"
      ref="applyForm"
      style="width: 70%; margin-left: 15%"
    >
      <el-form-item label="申请人" prop="applicant" :disabled="true">
        <el-input v-model="prevApplyFormData.applicant" @focus="focus">
        </el-input>
      </el-form-item>
      <el-form-item label="申请部门" prop="applicant_dept">
        <el-input readonly v-model="prevApplyFormData.applicant_dept" />
      </el-form-item>
      <el-form-item label="申请机构" prop="applicant_org">
        <el-input readonly v-model="prevApplyFormData.applicant_org" />
      </el-form-item>
      <el-form-item label="申请人联系方式" prop="applicant_contact">
        <el-input v-model="prevApplyFormData.applicant_contact" />
      </el-form-item>
      <el-form-item label="应用场景" prop="application_business_sys">
        <el-select
          style="width: 100%"
          v-model="prevApplyFormData.application_business_sys"
          placeholder="请选择应用场景"
          @change="businessSysChange"
        >
          <el-option
            v-for="(dict,index) in businessSysList"
            :key="index"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请数量" prop="apply_amount">
        <el-input v-model="prevApplyFormData.apply_amount" />
      </el-form-item>
      <el-form-item label="运营商" prop="operator">
        <el-select
          style="width: 100%"
          v-model="prevApplyFormData.operator"
          placeholder="请选择运营商"
          @change="subOperatorChanged"
        >
          <el-option
            v-for="(dict,index) in subOperatorDictList"
            :key="index"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="资费套餐">
        <el-select
          style="width: 100%"
          v-model="productName"
          placeholder="请选择资费套餐"
        >
          <el-option
            v-for="(fee,index) in feeList"
            :key="index"
            :label="
              fee.name +
              ' ( ' + fee.operatorplatformName +' 价格:' +
              fee.bill +
              '元 数据用量:' +
              fee.flow +
              'MB)'
            "
            :value="fee.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="配送地址" prop="shipping_addr">
        <el-input v-model="prevApplyFormData.shipping_addr" />
      </el-form-item>
      <el-form-item label="需求内容" prop="remark">
        <el-input type="textarea" :rows="3" v-model="prevApplyFormData.remark" />
      </el-form-item>
      <div
        v-if="showFormBtn"
        style="
          width: 30%;
          margin-left: 35%;
          display: flex;
          justify-content: space-between;
        "
      >
        <el-button type="primary" size="mini" @click="submitForm">提交</el-button>
        <el-button @click="resetForm" size="mini">重置</el-button>
      </div>
    </el-form>
    <!-- 申请人弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      title="申请人"
      :visible.sync="selectApplicantDiagVisible"
      width="40%"
      :before-close="AreaClose"
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="" prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="用户名或用户姓名"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div style="height: 300px; overflow: auto">
        <el-table
          ref="businessUserTable"
          v-loading="loading"
          :data="businessUserList"
          highlight-current-row
          @current-change="handleCurrent"
        >
          <el-table-column
            show-overflow-tooltip
            prop="userName"
            label="用户名"
            align="left"
          />
          <el-table-column
            align="left"
            show-overflow-tooltip
            prop="realName"
            label="姓名"
          />
          <el-table-column
            align="left"
            show-overflow-tooltip
            prop="nickName"
            label="昵称"
          />
        </el-table>
        <pagination
          @pagination="getBusinessUserList"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="selectCancel">取消</el-button>
        <el-button size="mini" type="primary" @click="selectConfirm()"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getOperator,
  listFeeByOperator,
} from "../../../api/system/resource/fee";
import { getDictList, getSuperiorOrganization, getFee } from "../../../api/system/org";
import {
  businessUserList,
  isResourceConsumingOrg,
} from "../../../api/iot/flowable/custom";
import { deepClone } from "../../../utils";
import { getInfo } from "../../../api/login";

export default {
  props: ["prevApplyFormData", "showFormBtn", "disableElement"],
  dicts: [
    "operatorplatform",
    "sim_fee_status",
    "operator",
    "sim_fee_type",
    "org_group",
  ],
  data() {
    return {
      productName:'',
      name:'',
      operatorVo: {
        orgId: "",
        businessSysDictValue: "",
      },
      rules: {
        applicant: [
          {
            required: true,
            message: "申请人不能为空",
            trigger: "blur",
          },
        ],
        applicant_dept: [
          {
            required: true,
            message: "申请部门不能为空",
            trigger: "blur",
          },
        ],
        applicant_org: [
          {
            required: true,
            message: "请选择申请机构",
            trigger: "blur",
          },
        ],
        applicant_contact: [
          {
            // required: true,
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请填入申请人正确手机号",
            trigger: "blur",
          },
        ],
        application_business_sys: [
          {
            required: true,
            message: "应用场景不能为空",
            trigger: "blur",
          },
        ],
        apply_amount: [
          {
            pattern: /^[1-9]\d*$/,
            required: true,
            message: "申请数量应为正整数，且不能为空",
            trigger: "blur",
          },
        ],
        sub_operator: [
          {
            required: true,
            message: "运营商平台不能为空",
            trigger: "blur",
          },
        ],
        product: [
          {
            required: true,
            message: "资费套餐不能为空",
            trigger: "blur",
          },
        ],
        shipping_addr: [
          {
            required: true,
            message: "配送地址不能为空",
            trigger: "blur",
          },
        ],
        apply_memo: [
          {
            required: true,
            message: "备注不能为空",
            trigger: "blur",
          },
        ],
        CityTelecomApprovalResult: [
          {
            required: true,
            message: "审批结果不能为空",
            trigger: "blur",
          },
        ],
        ipPool: [
          {
            required: true,
            message: "请选择IP池",
            trigger: "blur",
          },
        ],
        APNNames: [
          {
            required: true,
            message: "APN名称不能为空",
            trigger: "blur",
          },
        ],
        CityTelecomApprovalAssignedIP: [
          {
            required: true,
            message: "已分配IP不能为空",
            trigger: "blur",
          },
        ],
        purchaseType: [
          {
            required: true,
            message: "采购方式不能为空",
            trigger: "blur",
          },
        ],
        purchasingPersonnel: [
          {
            required: true,
            message: "指定采购人员不能为空",
            trigger: "blur",
          },
        ],
        SubOperator: [
          {
            required: true,
            message: "运营商平台不能为空",
            trigger: "blur",
          },
        ],
        PurchaseListExcel: [
          {
            required: true,
            message: "采购清单Excel文件必须上传",
            trigger: "blur",
          },
        ],
        PurchaseListScanCopy: [
          {
            required: true,
            message: "盖章采购清单扫描件必须上传",
            trigger: "blur",
          },
        ],
        ShippingInfo: [
          {
            required: true,
            message: "请输入物流单号或者快递单号",
            trigger: "blur",
          },
        ],
        // PurchaseListMemo: [
        //   {
        //     required: true,
        //     message: "备注不能为空",
        //     trigger: "blur",
        //   },
        // ],
        SimCardImportFile: [
          {
            required: true,
            message: "卡入库文件不能为空",
            trigger: "blur",
          },
        ],
        // SimCardImportMemo: [
        //   {
        //     required: true,
        //     message: "备注不能为空",
        //     trigger: "blur",
        //   },
        // ],
        AccountID: [
          {
            required: true,
            message: "账号ID不能为空",
            trigger: "blur",
          },
        ],
        // SimCardImportComment: [
        //   {
        //     required: true,
        //     message: "备注不能为空",
        //     trigger: "blur",
        //   },
        // ],
      },
      subOperatorDictList: [],
      businessSysList: [],
      feeList: [],
      selectApplicantDiagVisible: false,
      // 查询参数
      queryParams: {
        deptId: undefined,
      },
      selectedUser: {},
      total: 0,
      businessUserList: [],
      // 遮罩层
      loading: true,
    };
  },
  created() {
    if(this.prevApplyFormData.product){
      getFee(this.prevApplyFormData.product).then((res) => {
        this.productName = res.data.name
      });
    }
    getDictList("apply_scene").then((res) => {
      this.businessSysList = res.data;
    });

    getDictList("operator").then((res) => {
      this.subOperatorDictList = res.data;
    });

    if(this.prevApplyFormData.operator != null){
      listFeeByOperator(this.prevApplyFormData.operator).then((response) => {
        this.feeList = response.data;
        // this.prevApplyFormData.product = parseInt(this.prevApplyFormData.product);
      });
    }

    isResourceConsumingOrg().then((res) => {
      if (res.data == 1) {
        //登录账号业务机构是资源使用单位
        getInfo().then((res) => {
          //自动填写当前操作员信息且只读
          const user = res.user;
          this.applyForm.applicant = user.realName;
          this.applyForm.applicant_username = user.userName;
          this.applyForm.applicant_dept = user.org.orgname;
          this.getSuperiorOrg(user.orgId);
          this.applyForm.applicant_contact = user.phone;
          this.pageOrgId = user.org.orgId;
          this.orgIdtow = user.org.orgId;
        });
      }
    });
  },
  watch: {
    prevApplyFormData(val){
      getFee(val.product).then((res) => {
        this.productName = res.data.name
      });
      this.prevApplyFormData.product = val.product
      listFeeByOperator(val.operator).then((response) => {
        this.feeList = response.data;
        // this.prevApplyFormData.product = parseInt(this.prevApplyFormData.product);
      });
      getDictList("operator").then((res) => {
        this.subOperatorDictList = res.data;
      });
    }
  },
  methods: {
    businessSysChange(val) {
      this.operatorVo.businessSysDictValue = val;
      getOperator(this.operatorVo).then((res) => {
        this.subOperatorDictList = res.data;
      });
    },
    /** 平台改变获取套餐*/
    subOperatorChanged(row, defaultValue) {
      if (defaultValue) {
        this.prevApplyFormData.product = defaultValue;
      } else {
        this.prevApplyFormData.product = "";
      }

      this.feeList = [];
      let current = null;
      current = row;
/*       for (let i = 0; i < this.subOperatorDictList.length; i++) {
        console.log('this.subOperatorDictList[i]',this.subOperatorDictList[i])
        if (this.subOperatorDictList[i].dictValue == row) {
          current = this.subOperatorDictList[i].dictValue;
          break;
        }
      } */
      if (current != null) {
        listFeeByOperator(current).then((response) => {
          this.feeList = response.rows;
        });
      }
    },
    // 申请部门
    focus() {
      this.selectApplicantDiagVisible = true;
      this.getBusinessUserList();
    },
    changeriodl(data, checked, indeterminate) {
      if (checked) {
        if (data.children) {
          this.$refs.dataTree.setChecked(data, false);
          this.$modal.msgError("请选择部门");
          return;
        }
        this.orgName = data.label;
        this.orgId = data.id;
        this.$refs.dataTree.setCheckedKeys([data.id]);
      }
    },
    // 筛选部门
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    Areasure() {
      this.selectApplicantDiagVisible = false;
      this.orgIdtow = this.orgId;
      this.applicant_dept = this.orgName;
      this.getSuperiorOrg(this.orgId);
    },
    AreaClose() {
      this.selectApplicantDiagVisible = false;
    },
    getBusinessUserList() {
      businessUserList(this.queryParams).then((res) => {
        this.businessUserList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    /** 查询按钮操作 */
    handleQuery() {
      this.getBusinessUserList();
    },
    /** 关闭申请人选择弹窗 */
    selectCancel() {
      this.selectApplicantDiagVisible = false;
    },
    /** 关闭申请人选择弹窗 */
    handleCurrent(val) {
      this.selectedUser = val;
      this.$refs.applyForm.clearValidate("applicant");
      this.$refs.applyForm.clearValidate("applicant_org");
      this.$refs.applyForm.clearValidate("applicant_dept");
    },
    /** 确认选择申请人 */
    selectConfirm() {
      this.prevApplyFormData.applicant_username = this.selectedUser.userName;
      this.prevApplyFormData.applicant = this.selectedUser.realName;
      this.getSuperiorOrg(this.selectedUser.orgId);
      this.prevApplyFormData.applicant_contact = this.selectedUser.phone;
      this.prevApplyFormData.applicant_dept = this.selectedUser.org.orgName;
      this.operatorVo.orgId = this.selectedUser.parentId;
      this.selectApplicantDiagVisible = false;
    },

    getSuperiorOrg(id) {
      getSuperiorOrganization(id).then((res) => {
        this.prevApplyFormData.applicant_org = res.data.name;
      });
    },

    /** 清空表单 */
    resetForm() {
      //请空数据
      this.prevApplyFormData = {
        applicant: "",
        applicant_username: "",
        applicant_dept: "",
        applicant_org: "",
        applicant_contact: "",
        application_business_sys: "",
        apply_amount: "",
        sub_operator: "",
        product: "",
        shipping_addr: "",
        apply_comment: "",
        remark:""
      };
      //this.$refs.applyForm.clearValidate();
      /*       this.applyForm = {
        applicant: "",
        applicant_dept: "",
        applicant_org: "",
        applicant_contact: "",
        application_business_sys: "",
        apply_amount: "",
        sub_operator: "",
        product: "",
        shipping_addr: "",
      }; */
    },
    submitForm() {

      this.$refs.applyForm.validate((valid) => {

        if (!valid) return false;
        // 触发sumit事件
        const params = {
          formType: "ApplyForm",
          formData: this.prevApplyFormData,
        };
        this.$emit("submit", params);
        return true;
      });
    },
  },
};
</script>
